<template>
    <div class="my-custiom">
        <div class="my-custiom-content">
            <div class="my-custiom-title">
                系统性能监控
            </div>
            <div class="my-custiom-content-text" ref="scrollContainer">
                <div v-for="item in reception" :key="item.value" class="my-custiom-content-text-item">
                    <div>{{ item.user }}</div>
                    <div>{{ item.name }}</div>
                    <div>{{ item.time }}</div>
                </div>
            </div>

        </div>

    </div>
</template>

<script lang="ts">
// 定义组件
import { Component, Vue, Prop } from 'vue-property-decorator';
import Api from '../../api/api';
@Component
export default class TestPage extends Vue {

    @Prop({ type: String, default: '' })
    userId!: string;

    @Prop({ type: Array || null, default: null })
    roleIds!: any[] | null;

    @Prop({ type: Array || null, default: null })
    roleName!: any[] | null;

    @Prop({ type: String, default: '' })
    phone!: string;

    @Prop({ type: String, default: '' })
    email!: string;

    @Prop({ type: String, default: '' })
    deptName!: string;

    @Prop({ type: String, default: '' })
    deptId!: string;
    reception: any = [
        {
            value: 0,
            name: '删除了这风格',
            time: '2023-07-01',
            user: '张建国'
        },
        {
            value: 1,
            name: '添加了一个信息',
            time: '2023-07-03',
            user: '李大放'
        },
        {
            value: 2,
            name: '借阅了265年档案信息',
            time: '2023-07-03',
            user: '陈仲想'
        },
        {
            value: 3,
            name: '阅了225年档案信息',
            time: '2023-07-03',
            user: '毛不怕'
        }, {
            value: 4,
            name: '阅了225年档案信息',
            time: '2023-07-03',
            user: '韩绍远'
        }, {
            value: 5,
            name: '阅了225年档案信息',
            time: '2023-07-03',
            user: '董大伟'
        }, {
            value: 6,
            name: '阅了225年档案信息',
            time: '2023-07-03',
            user: '山村宁本'
        }, {
            value: 7,
            name: '阅了225年档案信息',
            time: '2023-07-03',
            user: '测试'
        }, {
            value: 8,
            name: '阅了225年档案信息',
            time: '2023-07-03',
            user: '测试'
        },
        {
            value: 9,
            name: '阅了225年档案信息',
            time: '2023-07-03',
            user: '测试'
        },
        {
            value: 10,
            name: '阅了225年档案信息',
            time: '2023-07-03',
            user: '测试'
        },
        {
            value: 11,
            name: '阅了225年档案信息',
            time: '2023-07-03',
            user: '测试'
        },
        {
            value: 12,
            name: '阅了225年档案信息',
            time: '2023-07-03',
            user: '测试'
        },
        {
            value: 13,
            name: '阅了225年档案信息',
            time: '2023-07-03',
            user: '测试'
        },
        {
            value: 14,
            name: '阅了225年档案信息',
            time: '2023-07-03',
            user: '测试'
        },
        {
            value: 15,
            name: '阅了225年档案信息',
            time: '2023-07-03',
            user: '测试'
        },
        {
            value: 16,
            name: '阅了225年档案信息',
            time: '2023-07-03',
            user: '测试'
        },
        {
            value: 17,
            name: '阅了225年档案信息',
            time: '2023-07-03',
            user: '测试'
        },

    ]   //接收情况统计
    replayToken: any = ''

    created() {
        this.fetchReplayToken();
    }

    async fetchReplayToken() {
        this.replayToken = await Api.exportReplayToken()
        // console.log('this.replayToken', this.replayToken);

    }

}








</script>

<style lang="less" scoped>
.my-custiom {
    height: 100%;
    width: 100%;


}

.my-custiom-content {
    padding: 20px;
    height: 100%;
    position: relative;
    background-color: #fff;
}

.my-custiom-title {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 16px;
    color: black;
    position: relative;
    /* 确保伪元素相对于该容器定位 */

}

.my-custiom-content-text {
    font-size: 15px;
    color: black;
    padding: 5px;

    max-height: 300px;
    /* 确保高度足够 */
    overflow-y: auto;



}

.my-custiom-content-text-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    // div {
    //     transition: color 0.3s ease; /* 添加平滑过渡效果 */
    // }

    // &:hover div {
    //     // color: #d1e9ff; /* 鼠标滑入时的文字颜色，可以根据需要修改 */

    // }
}
</style>